<template>
    <div class="main_body">
        <header >
            <a @click="$api.goBack()" class="back"></a>
            <span v-if="teacherId">教师详情</span>
            <span v-if="!teacherId">添加教师</span>
            <a  @click="addTeacher" v-if="canEdit||!teacherId&&canAdd" class="add">完成</a>
        </header>
        <div class="select_class" style="height:auto;">
            <div class="model" @click="$api.clickModel(2)" v-if="!canEdit" ></div>
            <div class="main"  @click="changePhoto()">
                <div class="flex">
                    <div>头像</div>
                    <div class="red">*</div>
                </div>
                <div @click.stop="$api.showImgDetail(detail.teacherPhoto)" ><img class="image_wrap" :src="$api.formatterImg(detail.teacherPhoto)"/></div>
            </div>
            <div class="main">
                <div class="flex">
                    <div>姓名</div>
                    <div class="red">*</div>
                </div>
                <div><input :readonly="!canEdit" @change="changeValue" v-model="detail.teacherName"/></div>
            </div>
            <div class="main">
                <div class="flex">
                    <div>电话</div>
                    <div class="red">*</div>
                </div>
                <div><input :disabled="detail.teacherId"  @change="changeValue" v-model="detail.teacherPhone"/></div>
            </div>
            <div class="main">
                <div class="flex">
                    <div>职务</div>
                    <div class="red">*</div>
                </div>
                <div @click="openClassPicker" style="min-width:2rem;min-height:0.4rem;text-align:right;">{{detail.typeName}}</div>
            </div>
            <div class="main">
                <div class="flex">
                    <div>状态</div>
                    <div class="red">*</div>
                </div>
                <div class="flex">
                    <div>
                        <mt-radio
                        v-model="detail.workState"
                        @change="changeValue"
                        :options="[{
                            label: '在职',
                            value: '1',
                            disabled:!canEdit,
                          },
                          {
                            label: '离职',
                            value: '0',
                            disabled:!canEdit,
                          } ]">
                        </mt-radio>
                    </div>
                </div>
            </div>
            <!-- noClick用来阻止点击的类名 -->
            <div class="main"  :class="{noClick:!canEdit}" @click="openXueliPicker()">
                <div class="flex">
                    <div>学历</div>
                </div>
                <div class="flex"><div class="desc1">{{detail.education}}</div><div v-if="canEdit" class="more"></div></div>
            </div>
            <div class="main">
                <div class="flex">
                    <div>婚否</div>
                </div>
                <div class="flex">
                    <div>
                        <mt-radio
                        v-model="detail.isMarry"
                        @change="changeValue"
                        :options="[{
                            label: '已婚',
                            value: 'true',
                            disabled:!canEdit,
                            },
                            {
                            label: '未婚',
                            value: 'false',
                            disabled:!canEdit,
                            } ]">
                        </mt-radio>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="flex">
                    <div>生日</div>
                </div>
                <div @click="openTimePicker()">{{new Date(detail.birthday).Format("yyyy-MM-dd")}}</div>
            </div>
            <div class="main">
                <div class="flex">
                    <div>入职时间</div>
                </div>
                <div @click="openTimePicker(1)">{{new Date(detail.entryTime).Format("yyyy-MM-dd")}}</div>
            </div>
            <div class="main">
                <div class="flex">
                    <div>毕业学校</div>
                </div>
                <div class="flex"><input :readonly="!canEdit" v-model="detail.graduateSchool" @change="changeValue" placeholder="请输入毕业学校"/></div>
            </div>
            <div class="main " style="padding-bottom:0;border-bottom:0;">
                <div class="flex">
                    <div>教师风采</div>
                </div>
            </div>
            <div class="main" style="justify-content:start">
                <div class="image_wrap" v-for="(img,index) in detail.filePathList" v-if="!img.flagDelete" >
                    <div v-if="canEdit" @click="deleteImg(index)" class="deleteImg"></div>
                    <img  @click="$api.showImgDetail(img.filePath)" :src="$api.formatterImg(img.filePath)" />
                </div>
                <div v-if="canEdit" class="image_wrap" @click="AddPhoto()">
                    <img src="../../static/images/other/add-img.png"/>
                </div>
            </div>           
            <div class="main " style="padding-bottom:0;border-bottom:0;">
                <div class="flex">
                    <div>简介</div>
                </div>
            </div>
            <div class="main " >
                <div class="textarea_wrap" style="width:100%;padding:0;">
                    <textarea @change="changeValue" v-model="detail.content" rows="4"></textarea>
                </div>
            </div>
            <div class="main " style="padding-bottom:0;border-bottom:0;">
                <div class="flex">
                    <div>获奖情况</div>
                </div>
            </div>
            <div class="main " >
                <div class="textarea_wrap" style="width:100%;padding:0;">
                    <textarea @change="changeValue" v-model="detail.awards" rows="4"></textarea>
                </div>
            </div>            
            <div class="row" v-if="detail.teacherId&&useInfo.tsMenuList[2].voOperate.removeObj" @click="deleteTeacher" style="padding:0 0.37333rem">
                <mt-button style="width:100%;" type="danger">删除</mt-button>
            </div>     
            <div class="row" v-if="canEdit||!teacherId&&canAdd" @click="addTeacher" style="padding:0.37333rem;">
                <mt-button style="width:100%;" type="primary">完成</mt-button>
            </div>
            <mt-datetime-picker v-model='birthday' ref="beginDate" :startDate="startDate" type="date"  @confirm="changebirthday" >
            </mt-datetime-picker>
            <mt-datetime-picker v-model='entryTime' ref="endDate" :startDate="startDate" type="date" @confirm="changeentryTime" >
            </mt-datetime-picker>
            <!-- 选择学历弹窗 -->
            <mt-popup style="background:white;width:100%;"
            v-model="popupXueli"
            position="bottom">
            <div class="picker-toolbar" style="border-bottom:1px solid #f2f2f2">
                <span @click="SureOrCanelChangeXueli(1)" class="mint-datetime-action mint-datetime-cancel">取消</span> 
                <span @click="SureOrCanelChangeXueli()" class="mint-datetime-action mint-datetime-confirm">确定</span>
            </div>
            <mt-picker :slots="slots"  @change="ChangeXueli"></mt-picker>
            </mt-popup>
        <!-- 选择教师类型弹窗 -->
            <mt-popup style="background:white;width:100%;"
            v-model="popupClass"
            position="bottom">
            <div class="picker-toolbar" style="border-bottom:1px solid #f2f2f2">
                <span @click="SureOrCanelChangeTeacher(1)" class="mint-datetime-action mint-datetime-cancel">取消</span> 
                <span @click="SureOrCanelChangeTeacher()" class="mint-datetime-action mint-datetime-confirm">确定</span>
            </div>
            <mt-picker :slots="slots2"  @change="ChangeTeacher"></mt-picker>
            </mt-popup>
        </div>

        <getImage v-model='sheetVisible' ></getImage>
    </div>
</template>

<script>
    import {
        MessageBox
    } from 'mint-ui';
    import getImage from '../components/getImage.vue'
    export default {
        data() {
            return {
                slots: [{
                    flex: 1,
                    values: ['博士', '硕士', '本科', '专科', '其他'],
                    className: 'slot1',
                    textAlign: 'center'
                }],
                slots2: [{
                    values: [],
                    className: 'slot2',
                    textAlign: 'center'
                }],
                type: false, //判断新增或者编辑
                content: '',
                startDate: new Date(null),
                popupXueli: false,
                popupClass: false,
                sheetVisible: false,
                useInfo: '',
                canEdit: false, //是否可以编辑
                canAdd: false, //是否可以新增
                teacherId: null,
                education: '', //缓存学历
                typeName: '', //缓存的职务
                birthday: null, //过度时间
                entryTime: '2000-01-01', //过度时间
                detail: {
                    teacherPhoto: null,
                    birthday: null,
                    entryTime: '2000-01-01',
                    workState: '1',
                    typeName: '',
                    content: '',
                    filePathList: [],
                },
            }
        },
        components: {
            getImage
        },
        methods: { // 
            AddPhoto() { //打开照片选择器
                this.sheetVisible = true;
                sessionStorage.setItem('photoType', '2'); //风采用的图片
            },
            selectMainTeacher() { //选择主要教师
                sessionStorage.setItem('RadioTitle', 'selectMainTeacher')
                this.$router.push({
                    path: 'selectTeacher',
                });
            },
            changeValue() {
                this.beginAddOrEdit();
            },
            selectService() { //选择服务
                var radioOptions = {
                    title: 'selectService',
                }
                sessionStorage.setItem('radioOptions', JSON.stringify(radioOptions))
                this.$router.push({
                    path: 'selectService',
                });
            },
            deleteImg(index) {
                // this.detail.filePathList[index].flagDelete = 1;
                this.$set(this.detail.filePathList[index], 'flagDelete', 1)
                this.changeValue();
            },
            changebirthday() { //改变生日
                this.detail.birthday = new Date(this.birthday).Format("yyyy-MM-dd");
                this.beginAddOrEdit();
            },
            changeentryTime() { //改变开始时间
                this.detail.entryTime = new Date(this.entryTime).Format("yyyy-MM-dd");;
                this.beginAddOrEdit();
            },
            selectAideTeacher() { //选择助教老师
                sessionStorage.setItem('RadioTitle', 'selectAideTeacher')
                this.$router.push({
                    path: 'selectTeacher',
                });
            },
            ChangeTeacherName(e, value) {
                this.beginAddOrEdit();
            },
            getRadioBack() { //获取选择的老师
                var teacher = JSON.parse(sessionStorage.getItem('radioBackOptions'));
                console.log(1234);
                if (teacher) {
                    switch (teacher.title) {
                        case 'selectMainTeacher':
                            this.detail.mainTeacherId = teacher.item.teacherId
                            this.detail.mainTeacherName = teacher.item.teacherName
                            break;
                        case 'selectAideTeacher':
                            this.detail.aideTeacherId = teacher.item.teacherId
                            this.detail.aideTeacherName = teacher.item.teacherName
                            console.log(1234);
                            break;
                        case 'selectService':
                            this.detail.servicePatternId = teacher.item.servicePatternId
                            this.detail.patternName = teacher.item.patternName
                            break;
                    }
                    this.beginAddOrEdit();
                    sessionStorage.removeItem('radioBackOptions');
                }
            },
            deleteTeacher() { //删除教师
                console.log('删除')
                MessageBox.confirm('确定要删除教师吗?').then(action => {
                    var url = "/teacher/delete";
                    var params = {
                        schoolId: this.useInfo.schoolId,
                        teacherId: this.detail.teacherId
                    };
                    this.$api.post(url, params, (data) => {
                        MessageBox('提示', '删除成功');
                        this.$api.goBack();
                    })
                }).catch(e => {
                    console.log(e);
                });

            },
            addTeacher() { //校验参数,确认无误执行 addOrEditTeacher
                console.log('完成');
                if (!this.detail.teacherPhoto) { //如果没有图标
                    MessageBox('提示', '请选择头像');
                    return false;
                }
                if (!this.$check.empty(this.detail.teacherName, '请输入教师名称')) {
                    return false;
                };
                if (!this.$check.phone(this.detail.teacherPhone)) { //验证电话号码
                    return false;
                };
                if (!this.$check.empty(this.detail.typeName, '请选择职务')) {
                    return false;
                };
                this.addOrEditTeacher();
            },
            addStudent() { //继续加入学生
                var studentType = {
                    header: '加入学生',
                    type: 1,
                }
                console.log(1234);
                sessionStorage.setItem('studentType', JSON.stringify(studentType));
                this.$router.push({
                    path: 'g14',
                });
            },
            beginAddOrEdit() { //新增或编辑之前,用于做各种判断
                // if (this.detail.teacherId) { //有teacherId说明是编辑,直接进入编辑
                //     this.addOrEditTeacher();
                // } else {

                sessionStorage.setItem('teacherDetail', JSON.stringify(this.detail));

                // }
            },
            addOrEditTeacher() { //新增或者编辑教师
                var params = JSON.parse(JSON.stringify(this.detail));
                params.schoolId = this.useInfo.schoolId
                params.filePathList = JSON.stringify(params.filePathList);
                var url = "/teacher/save"
                this.$api.post(url, params, (data) => {
                    MessageBox('提示', '操作成功');
                    this.$api.clearItem(); //清除数据
                    this.$api.goBack();
                })
            },
            openTimePicker(end) { //打开时间选择器
                if (!this.canEdit || !this.canAdd) return;
                if (end) {
                    this.$refs.endDate.open();
                } else {
                    this.$refs.beginDate.open();
                }
            },
            openXueliPicker() {
                this.popupXueli = true;
            },
            openClassPicker() {
                if (!this.canEdit) return;
                this.popupClass = true;
            },
            SureOrCanelChangeXueli(cancel) { //学历选择器 确定取消点击事件
                if (!cancel) {
                    this.detail.education = this.education;
                    this.beginAddOrEdit();
                }
                this.popupXueli = false;
            },
            SureOrCanelChangeTeacher(cancel) { //教师类型选择器 确定取消点击事件
                if (!cancel) {
                    console.log(this.typeName);
                    this.utList.forEach(element => {
                        if (element.typeName == this.typeName) {
                            console.log(JSON.stringify(element));
                            this.detail.typeName = element.typeName
                            this.detail.userTypeId = element.userTypeId
                        }
                    })
                    this.beginAddOrEdit();
                }
                this.popupClass = false;
            },
            ChangeXueli(picker, values) { //选择学期
                this.education = values[0];
            },
            ChangeTeacher(picker, values) { //选择职务
                this.typeName = values[0];
            },
            changePhoto() {
                if (!this.canEdit) return;
                this.sheetVisible = true;
                sessionStorage.setItem('photoType', '1'); //头像用的图片
            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
                this.canEdit = this.useInfo.tsMenuList[2].voOperate.editObj
                this.canAdd = this.useInfo.tsMenuList[2].voOperate.addObj
            },
            getUtList() {
                var url = "/teacher/find"
                var params = {
                    teacherId: 0,
                    schoolId: this.useInfo.schoolId
                }
                this.$api.post(url, params, (data) => {
                    this.utList = data.info.utList
                    this.slots2[0].values = data.info.utList.map(x => {
                        return x.typeName;
                    })
                    this.getDetail();
                })
            },
            getDetail() {
                this.teacherId = JSON.parse(sessionStorage.getItem('teacherId'));
                let detail = JSON.parse(sessionStorage.getItem('teacherDetail'));
                if (detail) {
                    this.detail = detail
                    this.getImageBack();
                    return
                }

                if (!this.teacherId) {
                    this.getImageBack();
                    return;
                }
                var url = "/teacher/find"
                var params = {
                    teacherId: this.teacherId,
                    schoolId: this.useInfo.schoolId
                }
                console.log(1234)
                this.$api.post(url, params, (data) => {
                    let detail = data.info.teacher
                    detail.filePathList = data.info.filePathList
                    detail.workState = detail.workState.toString();
                    if (detail.isMarry != null) {
                        detail.isMarry = detail.isMarry.toString();
                    }
                    detail.birthday = new Date(detail.birthday);
                    detail.entryTime = new Date(detail.entryTime);
                    this.utList.forEach(element => {
                        if (element.userTypeId == detail.userTypeId) {
                            detail.typeName = element.typeName
                        }
                    })
                    this.detail = detail;
                    this.getImageBack();
                    // this.getRadioBack();
                })
            },
            formatPayPattern(type) { //格式化缴费模式
                if (type == 1) {
                    return '按期缴费';
                } else if (type == 2) {
                    return '按月缴费';
                }
            },
            getImageBack() {
                var filepath = JSON.parse(sessionStorage.getItem('imgOption'));
                if (filepath) {
                    var type = sessionStorage.getItem('photoType');
                    switch (type) {
                        case '1':
                            this.detail.teacherPhoto = filepath.filePath;
                            this.detail.baseFileId = filepath.baseFileId;
                            break;
                        case '2':
                            this.detail.filePathList.push(filepath);
                            break;
                    }
                    this.beginAddOrEdit();
                    sessionStorage.removeItem('imgOption');
                }
            }
        },
        // watch: {
        //     detail(newValue, oldValue) {
        //         console.log(123);
        //         this.addOrEditTeacher();
        //     }
        // },
        created() {
            this.getUseInfo();
            this.getUtList();



        },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .main_body {
        background: white;
        height: 100%;
    }
</style>